import React from 'react';
import { Card, Tag, Button, Toast, Divider } from 'react-vant';

import './style.css';

interface OrderCardProps {
  order: ResponseOrdersDto;
  onAccept: (orderId: number) => Promise<void>;
  onShipment: (orderId: number) => Promise<void>;
}

const OrderCard: React.FC<OrderCardProps> = ({ order, onAccept, onShipment }) => {
  const getStatusColor = () => {
    if (order.status < 0) {
      return 'danger';
    }
    switch (order.status) {
      case 0:
        return 'warning';
      case 1:
      case 2:
        return 'primary';
      case 3:
      case 4:
        return 'success';
      default:
        return 'default';
    }
  };

  const getStatusText = () => {
    switch (order.status) {
      case 0:
        return '待接单';
      case 1:
        return '待发货';
      case 2:
        return '待接收';
      case 3:
      case 4:
        return '已完成';
      case -1:
        return '已拒绝';
      case -2:
      case -3:
        return '已取消';
      case -4:
        return '已拒收';
      default:
        return '未知状态';
    }
  };

  const handleAccept = async () => {
    await onAccept(order.id);
  };

  const handleShipment = async () => {
    await onShipment(order.id);
  };

  return (
    <Card round className="order-card">
      <div className="order-header">
        <div className="order-number">{order.orderId}</div>
        <Tag plain type={getStatusColor()} className="order-status">
          {getStatusText()}
        </Tag>
      </div>
      <div className="order-customer">客户: {order.businessName}</div>
      <div className="order-time">下单时间: {order.createtimeStr}</div>
      <Divider />
      <div className="order-items">
        {order.details.map((item, index: any) => (
          <div key={index} className="order-item">
            <span className="item-name">{item.name}</span>
            <span className="item-quantity">x{item.count}</span>
            <span className="item-price">
              ¥{item.promotePrice ? item.promotePrice.toFixed(2) : item.price.toFixed(2)}
            </span>
          </div>
        ))}
      </div>
      <Divider />
      <div className="order-footer">
        <div className="order-total">总计: ¥{order.shouldPayMoney.toFixed(2)}</div>
        {(() => {
          if (order.status < 0) {
            return <></>;
          }
          switch (order.status) {
            case 0:
              return (
                <Button type="primary" onClick={handleAccept}>
                  接单
                </Button>
              );
            case 1:
              return (
                <Button type="success" onClick={handleShipment}>
                  发货
                </Button>
              );
            case 2:
            case 3:
            case 4:
              return <></>;
            default:
              return <></>;
          }
        })()}
      </div>
    </Card>
  );
};

export default OrderCard;
